<template>
  <div class="settings-container">
    <h2>系统设置</h2>
    
    <el-card class="settings-section">
      <template #header>
        <div class="card-header">
          <span>房间管理</span>
          <el-button type="primary" @click="showAddRoomDialog">添加房间</el-button>
        </div>
      </template>
      
      <el-table :data="rooms" style="width: 100%">
        <el-table-column prop="name" label="房间名称" />
        <el-table-column label="设备数量">
          <template #default="scope">
            {{ scope.row.devices.length }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="danger"
              size="small"
              @click="handleDeleteRoom(scope.row)"
              :disabled="scope.row.devices.length > 0">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>系统主题</span>
        </div>
      </template>
      <div class="theme-settings">
        <div class="setting-item">
          <span>深色模式</span>
          <el-switch v-model="darkMode" @change="updateThemeMode"></el-switch>
        </div>
        <div class="setting-item">
          <span>主题色</span>
          <el-color-picker v-model="themeColor" @change="updateThemeColor"></el-color-picker>
        </div>
      </div>
    </el-card>

    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>通知设置</span>
        </div>
      </template>
      <div class="notification-settings">
        <div class="setting-item">
          <span>设备状态变化通知</span>
          <el-switch v-model="notifications.deviceStatus"></el-switch>
        </div>
        <div class="setting-item">
          <span>自动化任务执行通知</span>
          <el-switch v-model="notifications.automation"></el-switch>
        </div>
        <div class="setting-item">
          <span>异常警报通知</span>
          <el-switch v-model="notifications.alerts"></el-switch>
        </div>
      </div>
    </el-card>

    <!-- 添加房间对话框 -->
    <el-dialog
      v-model="addRoomDialogVisible"
      title="添加房间"
      width="30%"
      :close-on-click-modal="false">
      <el-form :model="newRoom" :rules="rules" ref="roomForm" label-width="80px">
        <el-form-item label="房间名称" prop="name">
          <el-input v-model="newRoom.name" placeholder="请输入房间名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addRoomDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddRoom">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'Settings',
  setup() {
    const store = useStore()
    const addRoomDialogVisible = ref(false)
    const roomForm = ref(null)

    const rooms = computed(() => store.state.rooms)

    const newRoom = ref({
      name: ''
    })

    const rules = {
      name: [
        { required: true, message: '请输入房间名称', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
      ]
    }

    const showAddRoomDialog = () => {
      newRoom.value.name = ''
      addRoomDialogVisible.value = true
    }

    const handleAddRoom = async () => {
      if (!roomForm.value) return

      await roomForm.value.validate((valid) => {
        if (valid) {
          // 检查房间名是否已存在
          if (rooms.value.some(room => room.name === newRoom.value.name)) {
            ElMessage.error('房间名称已存在')
            return
          }

          // 生成新房间ID
          const maxId = Math.max(...rooms.value.map(room => room.id), 0)
          const newRoomData = {
            id: maxId + 1,
            name: newRoom.value.name,
            devices: []
          }

          store.commit('addRoom', newRoomData)
          ElMessage.success('添加房间成功')
          addRoomDialogVisible.value = false
        }
      })
    }

    const handleDeleteRoom = (room) => {
      if (room.devices.length > 0) {
        ElMessage.warning('请先删除房间内的所有设备')
        return
      }

      ElMessageBox.confirm(
        `确定要删除房间"${room.name}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.commit('removeRoom', room.id)
        ElMessage.success('删除成功')
      }).catch(() => {})
    }

    // 系统设置
    const darkMode = ref(store.state.theme.isDark)
    const themeColor = ref(store.state.theme.primaryColor)
    const notifications = ref({
      deviceStatus: true,
      automation: true,
      alerts: true
    })

    const updateThemeMode = (value) => {
      store.dispatch('updateTheme', {
        isDark: value,
        primaryColor: themeColor.value
      })
    }

    const updateThemeColor = (value) => {
      store.dispatch('updateTheme', {
        isDark: darkMode.value,
        primaryColor: value
      })
    }

    return {
      rooms,
      addRoomDialogVisible,
      newRoom,
      rules,
      roomForm,
      showAddRoomDialog,
      handleAddRoom,
      handleDeleteRoom,
      darkMode,
      themeColor,
      notifications,
      updateThemeMode,
      updateThemeColor
    }
  }
}
</script>

<style>
/* 深色主题样式 */
.dark-theme {
  --el-bg-color: #1f1f1f;
  --el-bg-color-overlay: #2d2d2d;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e0e0e0;
  --el-border-color: #434343;
  --el-border-color-light: #434343;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

.dark-theme .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
  color: var(--el-text-color-primary);
  border-color: var(--el-border-color);
}

.dark-theme .el-table {
  --el-table-bg-color: var(--el-bg-color-overlay);
  --el-table-tr-bg-color: var(--el-bg-color-overlay);
  --el-table-header-bg-color: var(--el-bg-color);
  --el-table-border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark-theme .el-input__inner {
  background-color: var(--el-bg-color);
  border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark-theme .el-button {
  --el-button-bg-color: var(--el-bg-color-overlay);
  --el-button-border-color: var(--el-border-color);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
}
</style>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--el-border-color-light);
}

.setting-item:last-child {
  border-bottom: none;
}

.theme-settings,
.notification-settings {
  padding: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 